<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8"/>
    <title>至娱</title>
    <link href="../../css/home/index.css" rel="stylesheet"/>
    <link href="../../css/home/common.css" rel="stylesheet"/>
    <!--Required libraries-->
    <script src="../../js/home/jquery-v1.10.2.min.js" type="text/javascript"></script>
    <script src="../../js/home/modernizr-custom-v2.7.1.min.js" type="text/javascript"></script>
    <script src="../../js/home/jquery-finger-v0.1.0.min.js" type="text/javascript"></script>
    <!--Include flickerplate-->
    <link href="../../css/home/flickerplate.css"  type="text/css" rel="stylesheet"/>
    <script src="../../js/home/flickerplate.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function(){

            $('.flicker-example').flicker();
        });
    </script>
</head>
<body>
<div class="container">
    <div class="head-top">
        <div style="width: 1100px; margin:0 auto;">
            <a href="#appdownload">移动端客户</a>
            <img src="../../img/phone.png"/>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="nav">
        <div class="logo"><img src="../../img/logo.png"/></div>
        <ul class="list">
            <li th:if="${type}==5"><a th:href="@{'/api/home'}" class="active">首页</a></li>
            <li th:if="${type}!=5"><a th:href="@{'/api/home'}">首页</a></li>
            <li th:if="${type}==3"><a th:href="@{'/api/home?type=3'}" class="active">明星</a></li>
            <li th:if="${type}!=3"><a th:href="@{'/api/home?type=3'}">明星</a></li>
            <li th:if="${type}==1"><a th:href="@{'/api/home?type=1'}" class="active">电影</a></li>
            <li th:if="${type}!=1"><a th:href="@{'/api/home?type=1'}">电影</a></li>
            <li th:if="${type}==0"><a th:href="@{'/api/home?type=0'}" class="active">电视</a></li>
            <li th:if="${type}!=0"><a th:href="@{'/api/home?type=0'}">电视</a></li>
            <li th:if="${type}==2"><a th:href="@{'/api/home?type=2'}" class="active">网剧</a></li>
            <li th:if="${type}!=2"><a th:href="@{'/api/home?type=2'}">网剧</a></li>
        </ul>
        <div class="search">
            <input class="search_input" value="搜你所想" onfocus="if(value=='搜你所想') {value=''}"
                   onblur="if (value=='') {value='搜你所想'}" />
            <a href="#">
                <img onclick="window.location.href='/api/home/more?title='+document.getElementsByClassName('search_input')[0].value" src="../../img/search.png"/>
            </a>
        </div>
        <div class="clearfix"></div>
    </div>
    <!--<div class="banner">-->
        <!--<div class="banner_box">-->
            <!--<a href="#"><img src="../../img/banner_01.png" alt="1"></a>-->
            <!--<a href="#"><img src="../../img/banner_02.png" alt="2"></a>-->
            <!--<a href="#"><img src="../../img/banner_03.png" alt="3"></a>-->
        <!--</div>-->
        <!--<ul class="btns">-->
            <!--<li class="current"></li>-->
            <!--<li></li>-->
            <!--<li></li>-->
        <!--</ul>-->
        <!--<div class="L-R-btns" >-->
            <!--<img src="../../img/left.png" class="left" id="prev">-->
            <!--<img src="../../img/right.png"class="right" id="next">-->
        <!--</div>-->
    <!--</div>-->
<!--轮播-->
    <div th:if="${type}==5" class="flicker-example" data-block-text="false">

        <ul id="labelUl">
            <li th:each="recommendSlider,iterStat:${recommendSliderData}"
                th:value="${iterStat.index}"  th:attr="data-background=${recommendSlider.img_url[0]}">
                <p class="label"  th:id="'label'+${iterStat.index}" style="left:0">
                    <span th:id="'labelSpan'+${iterStat.index}" th:text="${recommendSlider.name}"></span>
                </p>

            </li>


        </ul>
    </div>
    <div class="box">
        <div class="column_01">
            <h1>今日看点</h1><span>READ  TODAY</span>
            <ul>
                <li th:each="recommendList,iterStat:${recommendListLeftText}"><a th:href="'/api/home/detail/'+${recommendList.item.dataId}" target="_blank" class="textyc_sl" th:utext="'&lt;i&gt;&lt;/i&gt;'+${recommendList.item.name}"></a></li>
                <li>
                    <a th:href="@{/home/detail/{id}(id=${recommendListLeftImg1.item.dataId})}" target="_blank" style="margin-right:6px; float: left;" class="img1">
                        <img th:src="${recommendListLeftImg1.item.img_url[0]}" th:width="164" th:height="124"/>
                        <span th:text="${recommendListLeftImg1.item.name}" class="textyc_sl"></span>
                    </a>
                    <a target="_blank" th:href="@{/home/detail/{id}(id=${recommendListLeftImg2.item.dataId})}" class="img2">
                        <img th:src="${recommendListLeftImg2.item.img_url[0]}" th:width="164" th:height="124"/>
                        <span th:text="${recommendListLeftImg2.item.name}" class="textyc_sl"></span>
                    </a>
                    <div class="clearfix"></div>
                </li>
            </ul>
        </div>
        <div class="column_02">
            <img th:src="${recommendListMiddleImg.item.img_url[0]}" th:width="380" th:height="272"/>
            <ul>
                <li th:each="recommendList,iterStat:${recommendListMiddleText}"><a th:href="'/api/home/detail/'+${recommendList.item.dataId}" target="_blank"  class="textyc_sl" th:utext="'&lt;i&gt;&lt;/i&gt;'+${recommendList.item.name}"></a></li>
            </ul>
        </div>
        <div class="column_03">
            <div class="box01" th:each="recommendList,iterStat:${recommendListRight}" th:if="${iterStat}!=3">
                <div class="column_03_box">
                    <h2><a target="_blank" th:href="@{'/api/home/detail/'+${recommendList.item.dataId}}" th:text="${recommendList.item.name}"></a></h2>
                    <p th:text="${recommendList.item.author}"></p>
                </div>
                <img th:src="${recommendList.item.img_url[0]}"/>
                <div class="clearfix"></div>
            </div>

            <div class="box01" th:each="recommendList,iterStat:${recommendListRight}" th:if="${iterStat}==3" style="margin-bottom: 0;">
                <div class="column_03_box">
                    <h2><a target="_blank" th:href="@{'/api/home/detail/'+${recommendList.item.dataId}}" th:text="${recommendList.item.name}"></a></h2>
                    <p th:text="${recommendList.item.author}"></p>
                </div>
                <img th:src="${recommendList.item.img_url[0]}"/>
                <div class="clearfix"></div>
            </div>

        </div>
        <div class="clearfix"></div>
        <div class="title">
            <h1>推荐资讯</h1><span>INFORMATION</span><a target="_blank" th:href="@{'/api/home/more'}">更多>></a>
        </div>
        <div class="column_04">
            <div class="column_04_box">
                <img th:src="${informationListLeft[0].item.img_url[0]}"/>
                <ul>
                    <span><a th:href="'/api/home/detail/'+${informationListLeft[0].item.dataId}" target="_blank"  class="textyc_sl" th:text="${informationListLeft[0].item.name}"></a></span>
                    <li><a class="textyc_sl" th:href="'/api/home/detail/'+${informationListLeft[1].item.dataId}" target="_blank" th:text="${informationListLeft[1].item.name}"></a></li>
                    <li><a class="textyc_sl" th:href="'/api/home/detail/'+${informationListLeft[2].item.dataId}" target="_blank" th:text="${informationListLeft[2].item.name}"></a></li>
                </ul>
            </div>
            <div class="column_04_box">
                <img th:src="${informationListLeft[3].item.img_url[0]}"/>
                <ul>
                    <span><a th:href="'/api/home/detail/'+${informationListLeft[3].item.dataId}" target="_blank" class="textyc_sl" th:text="${informationListLeft[3].item.name}"></a></span>
                    <li><a th:href="'/api/home/detail/'+${informationListLeft[4].item.dataId}" target="_blank"  class="textyc_sl" th:text="${informationListLeft[4].item.name}"></a></li>
                    <li><a th:href="'/api/home/detail/'+${informationListLeft[5].item.dataId}" target="_blank" class="textyc_sl" th:text="${informationListLeft[5].item.name}"></a></li>
                </ul>
            </div>
            <div class="column_04_box">
                <img th:src="${informationListLeft[6].item.img_url[0]}"/>
                <ul>
                    <span><a th:href="'/api/home/detail/'+${informationListLeft[6].item.dataId}" target="_blank" class="textyc_sl" th:text="${informationListLeft[6].item.name}"></a></span>
                    <li><a th:href="'/api/home/detail/'+${informationListLeft[7].item.dataId}" target="_blank" class="textyc_sl" th:text="${informationListLeft[7].item.name}"></a></li>
                    <li><a th:href="'/api/home/detail/'+${informationListLeft[8].item.dataId}" target="_blank" class="textyc_sl" th:text="${informationListLeft[8].item.name}"></a></li>
                </ul>
            </div>
        </div>
        <div class="column_05">
            <div class="column_05_imgs">
                <a target="_blank" class="img1" th:href="'/api/home/detail/'+${informationListRightImg[0].item.dataId}"><img th:src="${informationListRightImg[0].item.img_url[0]}" style="margin-left:0;"/><!--<span class="textyc_sl" th:text="${informationListRightImg[0].item.name}"></span>--></a>
                <a target="_blank" class="img1" th:href="'/api/home/detail/'+${informationListRightImg[1].item.dataId}"><img th:src="${informationListRightImg[1].item.img_url[0]}"/><!--<span class="textyc_sl" th:text="${informationListRightImg[1].item.name}"></span>--></a>
                <a target="_blank" class="img1" th:href="'/api/home/detail/'+${informationListRightImg[2].item.dataId}"><img th:src="${informationListRightImg[2].item.img_url[0]}"/><!--<span class="textyc_sl" th:text="${informationListRightImg[2].item.name}"></span>--></a>
            </div>
            <ul>
                <span><a th:href="'/api/home/detail/'+${informationListRightImg[0].item.dataId}" target="_blank"  class="textyc_sl" th:text="${informationListRightImg[0].item.name}"></a></span>
                <li th:each="recommendList,iterStat:${informationListRightText}">
                    <a th:href="'/api/home/detail/'+${recommendList.item.dataId}" target="_blank" style="float:left"  class="textyc_sl"  th:text="${recommendList.item.name}"></a>
                    <span style="float:right;line-height: 36px;color: #7b7b7b; font-size: 14px;" th:text="${#dates.format(recommendList.item.publishDate,'yyyy-MM-dd')}"></span>
                    <div class="clearfix"></div>
                </li>


            </ul>
        </div>
        <div class="clearfix"></div>
        </div>
    <div class="footer">
        <div class="footer_container">
        <div class="footer_logo"><img src="../../img/logo.png"/></div>
        <ul>
            <li><a href="mailto:81139271@qq.com">海宁至娱智乐影视文化有限公司</a></li>
            <li><a href="mailto:81139271@qq.com">联系我们</a></li>
            <li><a href="#">Copyright 2018 All Rights Reserved</a></li>
        </ul>
        <ul class="saoma">
            <li><img id="appdownload" src="../../images/download/appdownload.png" th:height="111" th:width="111"/></li>
            <li><span>扫描二维码  关注我们</span></li>
        </ul>
        <div class="clearfix"></div>
        </div>
    </div>
    </div>
<!--<script src="js/jquery-2.1.1.min.js"></script>-->
<!--<script src="js/common.js"></script>-->
<script type="text/javascript">
    $(function(){
        var liWidth=$("#labelUl li").width();
        $(".label").css("width",liWidth);
//        $("#label0").css('width',liWidth+(170));
        $('[id^="labelSpan"]').each(function(i,n){
            var temp = $(this).width();
            $(this).css("padding-left",(liWidth-temp)/2);

            var width = 0;
            for(var a=0;((a-i)!=0);a++){
               width+=$("#label"+a).width();
            }
            $(this).parent().css("left",width);
        });


    })
</script>
</body>
</html>